<template>
    <header class="header">
        <nav class="nav">
            <div class="nav-container">
                <a href="/" class="logo">
                    <img :src="$store.state.setting.avatar" class="logo-img" alt="Logo" />
                    <span class="blog-name">{{ $store.state.setting.blogName }}</span>
                </a>
                
                <div class="nav-menu" id="navbar-user">
                    <ul class="menu-list">
                        <li>
                            <a @click="$router.push('/')" 
                               :class="['menu-link', currPath == '/' ? 'active' : '']">
                               首页
                            </a>
                        </li>
                        <li>
                            <a @click="$router.push('/category')" 
                               :class="['menu-link', currPath == '/category' ? 'active' : '']">
                               分类
                            </a>
                        </li>
                        <li>
                            <a @click="$router.push('/tag')"
                               :class="['menu-link', currPath == '/tag' ? 'active' : '']">
                               标签
                            </a>
                        </li>
                        <li>
                            <a @click="$router.push('/archive')"
                               :class="['menu-link', currPath == '/archive' ? 'active' : '']">
                               归档
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="right-section">
                    <div class="search-box">
                        <input type="text" placeholder="搜索文章..." class="search-input" />
                    </div>
                    <div class="user-section">
                        <span class="login-btn" v-if="!isLogin" 
                              @click="$router.push('/login')">登录</span>
                        <div v-else class="user-info" @click="$router.push('/admin')">
                            <img class="avatar cursor-pointer" 
                                 :src="$store.state.user.avatar" 
                                 alt="user avatar">
                            <span class="username">{{ $store.state.user.username }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </nav>
    </header>
</template>

<script setup>
import { useStore } from 'vuex'
import { useRoute } from 'vue-router';
import { ref, computed } from 'vue';
import { showModel, showMessage } from '@/composables/util'
import { onMounted } from 'vue'
import { initDropdowns, initCollapses, initModals } from 'flowbite'

onMounted(() => {
    initCollapses();
    initDropdowns();
    initModals();
})

const store = useStore()
const route = useRoute()

const currPath = ref(route.path)

console.log(store.state.user)
const keys = Object.keys(store.state.user)
console.log('====== keys')
console.log(keys)
const isLogin = computed(() => {
    return Object.keys(store.state.user).length > 0
})

const logout = () => {
    console.log('登出')
    store.dispatch('logout')
    showMessage('退出登录成功', 'success')
    isLogin.value = false
}

</script>

<style scoped>
.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    border-bottom: 1px solid #eee;
    height: 64px;
}

.nav {
    width: 100%;
}

.nav-container {
    height: 100%;
    max-width: 1230px;
    margin: 0 auto;
    padding: 0 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-right: 2rem;
}

.logo-img {
    height: 40px;
    width: 40px;
    margin-right: 0.75rem;
    border-radius: 4px;
}

.blog-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #111827;
}

.nav-menu {
    flex: 1;
}

.menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1.5rem;
}

.menu-link {
    display: block;
    padding: 0.5rem 0;
    color: #666;
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s;
}

.menu-link:hover {
    color: #1e1e1e;
}

.menu-link.active {
    color: #1e1e1e;
    font-weight: 500;
}

.right-section {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.search-box {
    position: relative;
}

.search-input {
    padding: 0.5rem 1rem;
    border: 1px solid #eee;
    border-radius: 1.5rem;
    outline: none;
    font-size: 0.875rem;
    width: 200px;
    background: #f5f5f5;
}

.search-input:focus {
    border-color: #ddd;
    background: #fff;
}

.user-section {
    display: flex;
    align-items: center;
}

.login-btn {
    color: #666;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: color 0.2s;
}

.login-btn:hover {
    color: #1e1e1e;
}

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 4px;
    cursor: pointer;
    transition: opacity 0.2s;
}

.avatar:hover {
    opacity: 0.8;
}

.dropdown-menu {
    display: none;
}

.dropdown-menu .menu-list {
    flex-direction: column;
    gap: 0;
    padding: 0.5rem 0;
}

.menu-item {
    display: block;
    padding: 0.5rem 1rem;
    color: #666;
    cursor: pointer;
    transition: all 0.2s;
}

.menu-item:hover {
    background: #f5f5f5;
    color: #1e1e1e;
}

/* 深色模式 */
@media (prefers-color-scheme: dark) {
    .header {
        background: #1f2937;
        border-color: #374151;
    }

    .blog-name {
        color: #f9fafb;
    }

    .menu-link {
        color: #9ca3af;
    }

    .menu-link:hover,
    .menu-link.active {
        color: #f9fafb;
    }

    .search-input {
        background: #374151;
        border-color: #4b5563;
        color: #f9fafb;
    }

    .search-input:focus {
        background: #4b5563;
        border-color: #6b7280;
    }

    .login-btn {
        color: #9ca3af;
    }

    .login-btn:hover {
        color: #f9fafb;
    }

    .dropdown-menu {
        background: #1f2937;
        border-color: #374151;
    }

    .menu-item {
        color: #9ca3af;
    }

    .menu-item:hover {
        background: #374151;
        color: #f9fafb;
    }
}

/* 响应式布局 */
@media (max-width: 768px) {
    .nav-container {
        flex-wrap: wrap;
    }

    .nav-menu {
        order: 3;
        width: 100%;
        margin-top: 1rem;
    }

    .menu-list {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .search-box {
        display: none;
    }
}

.user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.username {
    color: #666;
    font-size: 0.9rem;
}

.avatar {
    width: 32px;
    height: 32px;
    border-radius: 4px;
    transition: opacity 0.2s;
}

.avatar:hover {
    opacity: 0.8;
}

/* 深色模式下的样式 */
@media (prefers-color-scheme: dark) {
    .username {
        color: #9ca3af;
    }
}
</style>